<template>
  <div>
    <div class="tools">
      <el-button
        type="primary"
        @click="handleAdd"
      >
        添加用户
      </el-button>
      <el-button
        type="success"
        @click="handleCreate"
      >
        新增用户
      </el-button>
    </div>
    <AppTable
      :data="users"
      :columns="columns"
      border
    />
    <Pagination
      v-model:currentPage="paginationData.currentPage"
      v-model:pageSize="paginationData.pageSize"
      :total="paginationData.total"
      :load-list="getTableData"
    />
    <UnAddUser
      :ou-id="props.ou.id"
      v-model:visible="visible"
      @success="handleSuccess"
    />
    <UserForm
      v-model:visible="createUserVisible"
      :title="`新增用户 -- ${props.ou.displayName}`"
      @success="handleCreateSuccess"
    />
  </div>
</template>

<script setup lang="tsx">
import { PropType, reactive, ref, watch } from 'vue'
import { addUserToDepartment, getAddedUsers, removeUserFromDepartment } from '@/http/department'
import type { IDepartment, IDepartmentUser } from '@/http/types/department'
import AppTable from '@/components/AppTable/index.vue'
import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import Pagination from '@/components/Pagination/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import UnAddUser from './unAddUser.vue'
import UserForm from '../user/UserForm.vue'
import { IButtonConfig } from '@/components/AppButtonGroup/type'

const buttonConfig:IButtonConfig[] = [
  {
    name: '移除',
    eventName: 'handleRemove',
    type: 'primary'
  }
]
const columns = ref([
  { label: '登录名', prop: 'userName' },
  { label: '姓名', prop: 'name' },
  { label: '邮箱地址', prop: 'email' },
  { label: '手机号', prop: 'phoneNumber' },
  // { label: '创建时间', prop: 'creationTime', formatter: (row:IDepartmentUser) => parseDate2Str(row.creationTime) },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }:{row:IDepartmentUser}) => {
      return <AppButtonGroup
        rowData={row}
        buttonConfigs={ buttonConfig }
        onEvent={(eventName:string) => {
          eventName === 'handleRemove' && handleRemove(row)
        }}
      >
      </AppButtonGroup>
    }
  }
])

const props = defineProps({
  ou: {
    type: Object as PropType<IDepartment>,
    required: true
  }
})

const visible = ref(false)
const createUserVisible = ref(false)
const paginationData = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
})

const users = ref<IDepartmentUser[]>([])
watch(() => props.ou.id, () => {
  getTableData()
})

const getTableData = async () => {
  if (!props.ou.id) return ElMessage.error('请选择部门')
  const res = await getAddedUsers(
    paginationData.currentPage,
    paginationData.pageSize,
    props.ou.id
  )
  users.value = res.items
  paginationData.total = res.totalCount
}
const handleRemove = (row:IDepartmentUser) => {
  ElMessageBox.confirm(
    '从部门移除该用户, 是否继续?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning'
    }
  )
    .then(async () => {
      await removeUserFromDepartment(row.id, props.ou.id)
      getTableData()
    })
}
const handleAdd = () => {
  if (!props.ou.id) return ElMessage.error('请选择部门')
  visible.value = true
}

const handleSuccess = () => {
  visible.value = false
  getTableData()
}

const handleCreate = () => {
  createUserVisible.value = true
}
const handleCreateSuccess = async (id: string) => {
  createUserVisible.value = false
  await addUserToDepartment(id, props.ou.id)
  getTableData()
}
</script>

<style scoped lang="scss">
.tools{
  margin-bottom: 20px;
}
</style>
